import './index.scss'
import {Button, Form, Input, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {shareDevStore} from './model'
import {IconImg} from '@/components/images'

const Sharedev = () => {
  let router = useRouter()
  const {
    updatePageQuery,
    pageQuery,
    detailData,
    shareDev,
    updateDetailData,
    errorMsg,
    canShowErrorMsg,
    setErrorMsg
  } = useContext(shareDevStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Sharedev useEffect', errorMsg, canShowErrorMsg)
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Sharedev useDidShow')

    updatePageQuery(router.params)
    updateDetailData()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Sharedev useDidHide')
  })
  return (
    <View className="w-screen h-screen pb-30 flex flex-col overflow-hidden">
      <View className="w-full flex items-center px-16 mt-24 mb-12">
        <View className="hanzi text-16 mr-4">分享</View>
        <View className="hanzi text-16 font-medium">{pageQuery.devName}</View>
      </View>

      <View className="w-full h-20 px-16 mb-24 flex justify-between items-center">
        <View className="hanzi text-14 text-xx_text truncate">
          {`分享设备${detailData.shareCount || 0}次`}
        </View>
        <View className="h-full pt-4 pb-2">
          <View className="w-1 h-full bg-xx_text"></View>
        </View>
        <View className="hanzi text-14 text-xx_text truncate">
          {`被分享设备${detailData.passiveShareCount || 0}台`}
        </View>
        <View className="h-full pt-4 pb-2">
          <View className="w-1 h-full bg-xx_text"></View>
        </View>
        <View className="hanzi text-14 text-xx_text truncate">
          {`分享相关设备${detailData.shareLinkDevCount || 0}台`}
        </View>
      </View>
      <Form
        onSubmit={e => {
          shareDev(e.detail.value?.phone)
        }}
      >
        <View className="w-full px-16 mb-32">
          <View className="text-12 text-x_text mb-10">将本设备分享给：</View>
          <View className="mb-10 p-10 rounded-4 bg-white flex items-center overflow-hidden">
            <IconImg imgName="share-phone"></IconImg>
            <Input
              type="number"
              name="phone"
              className="flex-1 pl-10"
              placeholder="请输入对方手机号"
              placeholderStyle="color:#BFBFBF;font-size:28rpx"
              onInput={() => {
                setErrorMsg('')
              }}
            ></Input>
          </View>
          <View className="flex items-center">
            <View className="text-danger text-12 mr-6">*</View>
            <View
              className={`text-12 ${
                canShowErrorMsg ? 'text-danger' : 'text-xx_text'
              }`}
            >
              {canShowErrorMsg ? errorMsg : '只能将设备分享给已注册用户'}
            </View>
          </View>
        </View>

        <Button
          className="h-48 leading-48 mx-16 bg-primary rounded-6 text-16 text-white text-center"
          form-type="submit"
        >
          分享
        </Button>
      </Form>
    </View>
  )
}
export default observer(Sharedev)
